import './DashboardCard.css'; // 单独的 CSS 文件
import StatCard from './StatCard';

const DashboardCard = () => {
  return (
    <div className="card glow-blink">
      <div className='flex-container'>
        <StatCard 
          label="今日抓取数据量" 
          value="12,456" 
          trend="较昨日" 
          trendValue="5.2%" 
          trendDirection="up" 
        />
        <StatCard 
          label="待发布内容" 
          value="32" 
          trend="较昨日" 
          trendValue="2.1%" 
          trendDirection="up" 
        />
        <StatCard 
          label="活跃账号数" 
          value="186" 
          trend="较昨日" 
          trendValue="0.5%" 
          trendDirection="up" 
        />
        <StatCard 
          label="系统健康度" 
          value="98%" 
          trend="较昨日" 
          trendValue="0%" 
          trendDirection="up" 
        />
        <StatCard 
          label="问题响应" 
          value="86%" 
          trend="较昨日" 
          trendValue="0.3%" 
          trendDirection="up" 
        />
      </div>
      <div className='flex-container'>
        <StatCard 
          label="总抓取量" 
          value="258.741" 
          trend="较昨日" 
          trendValue="12.3%" 
          trendDirection="up" 
        />
        <StatCard 
          label="成功发布率" 
          value="96.7%" 
          trend="较昨日" 
          trendValue="12%" 
          trendDirection="up" 
        />
        <StatCard 
          label="平均响应时间" 
          value="1.2S" 
          trend="较昨日" 
          trendValue="0.2%" 
          trendDirection="up" 
        />
        <StatCard 
          label="异常任务数" 
          value="5" 
          trend="较昨日" 
          trendValue="3.5%" 
          trendDirection="up" 
        />
        <StatCard 
          label="今日点赞数" 
          value="18,503" 
          trend="较昨日" 
          trendValue="3.2%" 
          trendDirection="up" 
        />
      </div>
    </div>
  );
};

export default DashboardCard;